<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {storeToRefs} from "pinia";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import useClientStore from "@/pinia/clientStore.ts";
import Person from "@/views/hospital/views/client/components/person.vue";
import {submitOrderInterface} from "@/views/member/interface/interface.ts";


const route = useRoute()
const router = useRouter()

const clientStore = useClientStore()
const {userList, hosDetail} = storeToRefs(clientStore)
const fetchUserList = async () => {
  try {
    await clientStore.fetchUserList()
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const fetchHosDetail = async () => {
  try {
    await clientStore.fetchHosDetail(route.query.doctorId)
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const currentIndex = ref(-1)
const changeIndex = (index) => {
  currentIndex.value = index
}

const submitOrderParams = reactive<submitOrderInterface>({
  hoscode: "",
  scheduleId: "",
  patientId: ""
})
const handleSubmit = async () => {
  if (currentIndex.value === -1) return ElMessage.warning("请选择就诊人")
  submitOrderParams.hoscode = hosDetail.value?.hoscode
  submitOrderParams.scheduleId = hosDetail.value?.id
  submitOrderParams.patientId = userList.value[currentIndex.value]?.id
  try {
    const orderId = await clientStore.submitOrder(submitOrderParams)
    router.push({path: "/member/order", query: {orderId}})
  } catch (error) {
    ElMessage.error(error.message)
  }
}

onMounted(() => {
  fetchUserList()
  fetchHosDetail()
})
</script>

<template>
  <div class="client">
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-text type="primary">请选择就诊人</el-text>
          <el-button type="primary" icon="User" @click="$router.push({path:'/member/patient'})">添加就诊人</el-button>
        </div>
      </template>
      <div class="card-body">
        <Person v-for="(item,index) in userList" :key="item.id" :user="item" @click="changeIndex(index)" :confirm="currentIndex===index"></Person>
      </div>
    </el-card>
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-text type="primary">挂号信息</el-text>
        </div>
      </template>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期</div>
          </template>
          {{ hosDetail.workDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院</div>
          </template>
          {{ hosDetail.param?.hosname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室</div>
          </template>
          {{ hosDetail.param?.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名</div>
          </template>
          {{ hosDetail.docname || "未知" }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称</div>
          </template>
          {{ hosDetail.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长</div>
          </template>
          {{ hosDetail.skill }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生服务费</div>
          </template>
          ￥{{ hosDetail.amount }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="submit">
      <el-button type="success" @click="handleSubmit">确认挂号</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.client {
  padding-top: 30px;
  padding-left: 30px;

  .el-card {
    margin-bottom: 40px;

    .card-header {
      display: flex;
      justify-content: space-between;

      span {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .card-body {
      display: flex;

      flex-wrap: wrap;
    }
  }

  .submit {
    text-align: center;

    .el-button {
      width: 150px;
      height: 50px;
      font-size: 18px;
    }
  }
}
</style>
